<template>
	<view class="householdInformation">
		<uni-steps class="steps" :options="list1" :active="active" active-color="#026cfd" />
		<view class="item-content">
			
			<view class="row"><text>住户编号</text>
				<input style="font-size: 28rpx" type="number" placeholder="请输入" v-model="serialNo">
			</view>
			<view class="row"><text>住户姓名</text>
				<input style="font-size: 28rpx" type="text" placeholder="请输入真实姓名" v-model="username">
			</view>
			<view class="row"><text>住户性别</text>
				<uni-data-checkbox v-model="sexvalue" :localdata="sex"></uni-data-checkbox>
			</view>
			<view class="row"><text>证件类型</text>
				<view class="row-tanchu">
					<uni-data-select v-model="value2" :localdata="range2" @change="change2">
					</uni-data-select>
				</view>
			</view>
			<view class="row"><text>证件号码</text>
				<input style="font-size: 28rpx" v-model="idNumber" type="text" placeholder="请输入证件号码">
			</view>
			<view class="row"><text>与业主关系</text>
				<view class="row-tanchu">
					<!-- -->
					<uni-data-select v-model="value" :localdata="range" @change="change">
					</uni-data-select>
				</view>
			</view>
			<view class="row"><text>手机号码</text>
				<input style="font-size: 28rpx;" v-model="phoneNum" type="number" placeholder="请输入手机号码">
			</view>
			<view class="row-idphoto"><text>上传本人身份证照片</text>
				<text>请拍摄证件原件，并使照片中证件边缘完整，文字清晰，光线均匀。</text>

				<view id="t1">
					<uni-file-picker disable-preview :del-icon="false" return-type="object" :image-styles="imageStyles"
						@select="select1" />
					</uni-file-picker>
				</view>
				<view id="t1">
					<uni-file-picker disable-preview fileMediatype="image" :del-icon="false" return-type="object"
						:image-styles="imageStyles" @select="select2" />
					</uni-file-picker>
				</view>
			</view>

		</view>
		<view class="operate">
			<view @click="submitRev" hover-class="navigator-hover">
				<view class="addhouse">
					提交审核
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		http
	} from "../../../../utils/http.js"
	export default {
		data() {
			return {
				active: 1,
				list1: [{
					title: '房屋信息'
				}, {
					title: '住户信息'
				}, {
					title: '物业审核'
				}, {
					title: '认证成功'
				}],
				serialNo:null,
				username: "",
				sexvalue: 0,
				sex: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}],
				value2: 4,
				range2: [{
						value: 0,
						text: "身份证"
					},
					{
						value: 1,
						text: "护照"
					},
					{
						value: 2,
						text: "港澳通行证"
					},
				],
				documentType: "",
				idNumber: null,
				value: 5,
				range: [{
						value: 0,
						text: "本人"
					},
					{
						value: 1,
						text: "亲属"
					},
					{
						value: 2,
						text: "朋友"
					}, {
						value: 3,
						text: "租户"
					}, {
						value: 4,
						text: "其他"
					},
				],
				relationship: "",
				phoneNum: null,
				imgsrc1: "",
				imgsec2: "",
				backimgsrc1: "",
				backimgsec2: "",
				imageStyles: {
					width: 345,
					height: 160,
					// backgroundColor: "#f3f7ff",
					border: {
						color: "#ccc",
						width: 2,
						style: 'solid',
						radius: '2px'
					},
				},
				// 上一个页面的数据
				bigdata: ""
			};
		},
		methods: {
			change(e) {
				this.relationship = this.range[e].text
			},
			change2(e) {
				this.documentType = this.range2[e].text
			},
			select1(e) {
				this.imgsrc1 = e.tempFilePaths[0]
				// console.log(this.imgsrc1, "7777")
				let resurl1 = ""
				uni.uploadFile({
					url: "http://123.57.203.155:8077/oss/upload",
					filePath: this.imgsrc1,
					name: 'file',
					method: "post",
					header: {
						"Content-Type": "multipart/form-data"
					},
					success: (res) => {
						console.log(res,"qqqqqqqq")
						if (res.statusCode == 200) {
							resurl1 = JSON.parse(res.data).data.url
							// console.log(resurl1,"kkkkkkk")
							this.backimgsrc1 = resurl1
						}
					},
				})
			},
			select2(e) {
				this.imgsrc2 = e.tempFilePaths[0]
				let resurl2 = ""
				uni.uploadFile({
					url: "http://123.57.203.155:8077/oss/upload",
					filePath: this.imgsrc2,
					name: 'file',
					method: "post",
					header: {
						"Content-Type": "multipart/form-data"
					},
					success: (res) => {
						console.log(res,"iiii")
						if (res.statusCode == 200) {
							resurl2 = JSON.parse(res.data).data.url
							console.log(resurl2,"kkkkkkk")
							this.backimgsrc2 = resurl2
						}
					},
				})
			},

			submitRev() {

				// console.log(this.backimgsrc1, "232323232323");
				// console.log(this.backimgsrc2, "454545454545454545");
				let sex = this.sex[this.sexvalue].text;
				// console.log(typeof this.idNumber, "idNumber")
				// console.log(typeof this.phoneNum, "phoneNum")
				let enddata = {
					name: this.username,
					sex: sex,
					certificateType: this.documentType,
					identificationNumber: this.idNumber,
					relationships: this.relationship,
					phoneNumber: this.phoneNum,
					certificateFront: this.backimgsrc1,
					certificateBack: this.backimgsrc2,
					serialNo:this.serialNo
				}
				enddata.communityId = this.bigdata.cellName.id;
				enddata.community = this.bigdata.cellName.name;
				enddata.houseState = this.bigdata.housestatus;
				enddata.tower = this.bigdata.buildingName
				enddata.unit = this.bigdata.unitName
				enddata.room = this.bigdata.accountNumber //户号

				console.log(enddata)
				http({
					url: "/householdManagement/add",
					method:"post",
					data:enddata
				}).then((res)=>{
					console.log(res)
				})
				
				setTimeout(() => {
					uni.navigateTo({
						url: '../../myHouse'
					}, 2000);
				})
			},

		},
		onLoad(option) {
			console.log(option, "详情的")
			this.bigdata = JSON.parse(option.bigdata)
		}
	}
</script>

<style lang="less" scoped>
	.householdInformation {
		.item-content {

			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding: 0 38rpx;
			padding-bottom: 140rpx;

			.row {
				display: flex;
				width: 100%;
				justify-content: flex-start;
				padding: 30rpx 0;
				border-bottom: 1px solid #eee;
				align-items: center;

				text:nth-child(1) {
					text-align: left;
					width: 230rpx;
				}

				navigator,
				.row-tanchu {
					flex: 1;
					align-items: center;
					display: flex;
					justify-content: space-between;

					text {
						color: #a8a8a8;
						text-align: left;
					}
				}

				.row-tanchu {
					uni-data-select {
						flex: 1;
					}
				}

				.radio {
					margin-right: 30rpx;
				}

				.radios {
					display: flex;
				}

				.yanzhengma {
					width: 146rpx;
					height: 48rpx;
					text-align: center;
					line-height: 48rpx;
					background-color: #f2f2f4;
					font-size: 26rpx;
					border-radius: 8rpx;
					color: #a3a3a3;
				}
			}

			.row-switch {
				padding: 30rpx 0;
				width: 100%;
				display: flex;
				align-items: center;

				text {
					text-align: left;
					width: 230rpx;
				}

				.switch {
					position: relative;
					flex: 1;

					// display: flex;
					// justify-content: flex-end;
					switch {
						position: absolute;
						top: -34rpx;
						right: -24rpx;
					}
				}
			}

			.row:last-child {
				border: 0px;
			}

			.row-idphoto {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				margin-top: 30rpx;

				text:nth-child(2) {
					font-size: 24rpx;
					color: #c6c7c9;
				}

				.imgidphoto {
					width: 670rpx;
					height: 310rpx;
				}

				#t1 {
					margin-top: 30rpx;
					margin-bottom: 40rpx;
				}
			}
		}

		.operate {
			width: 100%;
			height: 120rpx;
			background-color: white;
			position: fixed;
			left: 0rpx;
			bottom: 0rpx;
			border-top: 1px solid #ccc;
			display: flex;
			align-items: center;
			justify-content: center;

			.addhouse {
				width: 670rpx;
				height: 82rpx;
				text-align: center;
				line-height: 82rpx;
				background-color: #006fff;
				color: white;
				font-size: 34rpx;
				border-radius: 10rpx;

			}
		}
	}
</style>
<style lang="less">
	.householdInformation {
		.uni-steps {
			margin: 60rpx auto;

			ma .uni-icons {
				font-size: 40rpx !important;
			}
		}

		.uni-select {
			padding: 0px !important;
			border: 0px !important;
		}

		.uni-select__input-placeholder {
			font-size: 28rpx !important;
		}

		.uni-select__input-box {
			height: 30rpx;
		}



		.tab-c {
			height: 200rpx !important;
		}

		.selected-list {
			height: 0px !important;

		}

		.item-text-overflow {
			width: 100% !important;
			text-align: center;
		}
	}
</style>
